<template>

    <div class="flex flex-col base-width">
        <div
            class="toShopCarResult flex flex-row justify-between items-center h-[84px] pt-[60px] base-width border-0 py-[75px] border-b border-gray-300">
            <div class="flex flex-row  items-center ">
                <div class="flex flex-row  text-[85px] ">
                    <el-icon>
                        <SuccessFilled class=" text-green-500" />
                    </el-icon>
                </div>

                <ul class="flex flex-col text-[20px] ml-[20px]">
                    <li class="text-[24px] font-bold text-gray-700">添加成功</li>
                    <li class="text-[#97728f] ">您的商品<span class="text-[#fc7d00] font-bold mx-3">{{ goodsInfo.goods_name }}</span>已成功添加到购物车
                    </li>
                </ul>
            </div>
            <div class="flex flex-row]">
                <el-button class="shopCar-button text-[#6b728f]" @click="$router.push({name:'DataView'})">继续购物</el-button>
                <el-button class="shopCar-button" type="warning" @click="toMyShopCarList">去购物结算</el-button>
            </div>

        </div>
        <div class="base-width  mt-[30px]" v-loading="isGetRecommendGoodsLoading" element-loading-text="正在加载数据...">
            <div class="base-width flex flex-row justify-center items-center h-[82px] text-[25px] text-gray-600 ">
                买购物车商品中的人还买了</div>
            <ul class=" grid-box base-width h-[610px]  mb-[40px]">
                <li class="w-[234px] h-[300px] bg-white flex flex-col items-center justify-center"
                    v-for="item in recommendGoodsList" :key="item.id"
                    @click="$router.push({ name: 'goodsDetail', params: { id: item.id } })">

                    <div class="goods-status  border border-solid border-red-700 bg-red-600 text-white" v-if="item.goods_status===2||item.goods_status===4"> 
                         {{ ["", "上架", "预售", "正常", "促销"][item.goods_status] }}</div>
                    <img class="w-[160px] h-[150px] mb-10" :src="baseURL + item.goods_photo[0]" alt="">
                    <div class="mb-6"> {{ item.goods_name }}</div>
                    <div class="text-[#dbdbdb] mb-6">
                        {{ txtEllipsis(item.goods_brief_o, maxLength = 13) }}
                    </div>
                    <div class="text-[#ff8d40] ">{{ item.goods_sale_price }}元起 <span
                            class="text-[#dbdbdb] text-[14px] line-through">{{ item.goods_price }}元</span></div>
                </li>

            </ul>

        </div>
    </div>

</template>



<script setup>
import { SuccessFilled } from '@element-plus/icons-vue';
import { ref, inject } from "vue";
import { useRoute, useRouter } from "vue-router";
import router from '../../router';
import API from '../../utils/API';
import { txtEllipsis } from "../../utils/StringUtils";
import { mainStore} from "../../store/index.js" 
const baseURL = inject('baseURL')
const goodsInfo = ref({});
const route = useRoute();
const isLoading = ref(false);
const loginClientInfo=ref(mainStore().loginClientInfo)
const isGetRecommendGoodsLoading = ref(false);

const findById = id => {
    isLoading.value = true;
  API.goodsInfo.findById(id)
  .then(result => {
        goodsInfo.value = result;
      })
      .finally(() => {
          isLoading.value = false;
        })
    }
    findById(route.params.id);

const recommendGoodsList = ref([]);
const getRecommendGoodsList = () => {
    isGetRecommendGoodsLoading.value = true;
    API.goodsInfo.getRecommendGoodsList()
        .then(result => {
            console.log(result.listData);
           
            result.listData.forEach(item => {
                item.goods_photo = JSON.parse(item.goods_photo);
            })
            recommendGoodsList.value = result.listData;
        })
        .finally(() => {
            isGetRecommendGoodsLoading.value = false;
        })
}
getRecommendGoodsList();

const toMyShopCarList = () => {
    router.push({ name: 'myShopCarList' })
}

</script>


<style lang="scss" scoped>
.shopCar-button {
    width: 130px;
    height: 50px;
    font-size: 20px;
    font-weight: bold;

}

.grid-box {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 10px;

    li {
        position: relative;
        .goods-status{
            position: absolute;
            top: 0;      
        }
    }
}
</style>